/**
 * 预设试验台列表
 */
import { FC, useState, useEffect, useMemo } from "react";
import { observer, inject } from "mobx-react";
import {
  Row,
  Col,
  Button,
  Modal,
  Form,
  Input,
  Select,
  Space,
  Divider,
  Typography,
  Table,
  Descriptions,
  Layout,
  Popover,
  Tooltip,
  message,
  Popconfirm,
} from "antd";
import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
import _ from "lodash";
import ShelfMiniPlane from "./ShelfMiniPlane";

import {
  createList,
  ROWWORD,
  RROWWORD,
  BASEWIDE,
  BASEHEIGHT,
  RATE,
  MARGIN,
  ReactionSlotName,
} from "../../utils";

import {
  ITShelf,
  ITBottle,
  ITDictValue,
  ITWorkbench,
  ITColumns,
  ITExpTable,
} from "../../store/interfaces";

import { ITStore } from "../../store";

import "../Workbench/index.less";
import "./index.less";
type TProp = {
  store: ITStore;
  isShow: boolean;
  close: () => void;
  showAddModal: () => void;
  data: ITExpTable | null;
  modify: (data: any) => void;
};

type SearchProp = {
  store: ITStore;
  showAddModal: () => void;
};

type WorkbenchViewProp = {
  store: ITStore;
  workbenchInfo: ITWorkbench | null;
  setSlotName: (slotname: string) => void;
  setShowShelfModal: (bool: boolean) => void;
  setShowReactModal: (bool: boolean) => void;
  shelfs: any;
  reactorShelf: any;
};

interface ITShelfBottle {
  shelfInfo?: ITShelf | null;
  bottleInfo?: ITBottle | null;
}

interface ITPopCont {
  store: ITStore;
  allShelf: ITShelf[];
  label: string;
}

interface ITDWP extends TProp {
  setShowShelfModal: (data: boolean) => void;
  setShowReactModal: (data: boolean) => void;
  setSlotName: (data: string) => void;
}

interface ITShelfModal extends ITDWP {
  showShelfModal: boolean;
  slotName: string;
  close: () => void;
  selectShelf: (data: any) => void;
  data: any;
}

interface ITRPopCont extends ITDWP {
  showReactModal: boolean;
  slotName: string;
  close: () => void;
  workbenchInfo: ITWorkbench | null;
  selectShelf: (data: any) => void;
  data: any;
}

interface ITRSProp extends TProp {
  slotName: string;
  showModal: boolean;
  close: () => void;
  selectShelf: (data: any) => void;
  data: any;
}

const { Option } = Select;

const { Text } = Typography;
const { Content } = Layout;

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const inputwide = {
  width: "100%",
};

const PopContent: FC<ITPopCont | any> = inject("store")(
  observer(({ store, label }: ITPopCont) => {
    const {
      languageStore: { lang, langCur },
      shelfStore: { allShelf },
      bottleStore: { allBottle },
      dictionaryStore: { getDictValuesByKey },
    } = store;

    if (!label) {
      return null;
    }

    let column = 0;
    let rows = 0;
    let volume = 0;

    let shelfInfo = null;
    let bottleInfo = null;
    let shelfType = "";

    const dicts: ITDictValue[] = getDictValuesByKey("reagentRackType");

    const getShelfTypeLabel = (type: string): string => {
      let labelstr = "";
      dicts.some(({ value, label, cnlabel }) => {
        if (value === type) {
          labelstr = label;
          if (langCur === "zhcn") {
            labelstr = cnlabel;
          }
          return true;
        }
        return false;
      });

      return labelstr;
    };

    allShelf.some((item: ITShelf) => {
      if (item.name === label) {
        column = item.column;
        rows = item.row;
        shelfInfo = item;
        shelfType = getShelfTypeLabel(shelfInfo.rackType);
        allBottle.some((bitem) => {
          if (bitem.id === item.bottleType) {
            volume = bitem.volume;
            bottleInfo = bitem;
            return true;
          }
          return false;
        });
        return true;
      }
      return false;
    });

    return (
      <Content>
        <ShelfMiniPlane shelfInfo={shelfInfo} bottleInfo={bottleInfo} />
        <Descriptions
          bordered
          size="small"
          column={1}
          style={{ marginTop: 20 }}
        >
          <Descriptions.Item label={lang["langracktype"]}>
            {shelfType}
          </Descriptions.Item>
          <Descriptions.Item label={lang["langcount"]}>
            {column * rows}
          </Descriptions.Item>
          <Descriptions.Item label={lang["langsinglevolume"]}>
            {volume}
            {lang["langmlunit"]}
          </Descriptions.Item>
          <Descriptions.Item label={lang["langtotalvolume"]}>
            {volume * column * rows}
            {lang["langmlunit"]}
          </Descriptions.Item>
        </Descriptions>
      </Content>
    );
  })
);

//试剂架选择弹窗
const ShelfSelectModal: FC<TProp | any> = inject("store")(
  observer(
    ({
      store,
      showShelfModal,
      close,
      slotName,
      selectShelf,
      data,
    }: ITShelfModal) => {
      const {
        languageStore: { lang },
        shelfStore: { allShelf },
        designerStore: {
          addEditDesignerLoading,
        },
      } = store;

      const [selectValue, setSelectValue] = useState<string>("");

      const options = useMemo(() => {
        let list: any[] = [{ label: lang["langempty"], value: "" }];
        if (allShelf && allShelf.length) {
          allShelf.forEach((item) => {
            // 过滤反应架
            if (item.rackType !== "reactor") {
              list.push({
                label: item.name,
                value: item.name,
              });
            }
          });
        }
        return list;
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, [allShelf]);

      useEffect(() => {
        if (data) {
          const { shelf } = data;
          setSelectValue(shelf);
        }
      }, [data]);

      const onSelect = (data: string) => setSelectValue(data);

      const closeModal = () => {
        setSelectValue("");
        close();
      };

      const onOk = () => {
        selectShelf({ slotName, value: selectValue });
        closeModal();
      };

      return (
        <Modal
          title={slotName}
          open={showShelfModal}
          onOk={onOk}
          onCancel={closeModal}
          destroyOnClose={true}
          confirmLoading={addEditDesignerLoading}
        >
          <Select
            style={{ width: "100%" }}
            defaultValue={null}
            value={selectValue}
            onSelect={onSelect}
          >
            {!!options.length &&
              options.map(({ label, value }: any, index: number) => (
                <Option value={value} key={index}>
                  <Popover
                    placement="left"
                    title={label}
                    content={<PopContent label={value} />}
                  >
                    <div>{label}</div>
                  </Popover>
                </Option>
              ))}
          </Select>
        </Modal>
      );
    }
  )
);

const WorkbenchView: FC<WorkbenchViewProp | any> = inject("store")(
  observer(
    ({
      store,
      workbenchInfo,
      setSlotName,
      setShowShelfModal,
      setShowReactModal,
      shelfs,
      reactorShelf,
    }: WorkbenchViewProp) => {
      const {
        languageStore: { lang, langCur },
        shelfStore: { allShelf },
        bottleStore: { allBottle },
      } = store;
      const [rowList, setRowList] = useState<number[]>([]);

      const [columnList, setColumnList] = useState<number[]>([]);

      const [slotMargin, setSlotMargin] = useState<number>(0);

      const [slotHeight, setSlotHeight] = useState<number>(0);

      const [slotWide, setSlotWide] = useState<number>(0);

      const [hoverPopName, setHoverPopName] = useState<string>("");

      // const [slotShelf, setSlotShelf] = useState<any>(null);

      useEffect(() => {
        setSlotHeight(BASEHEIGHT * RATE);
        setSlotWide(BASEWIDE * RATE);
        setSlotMargin(MARGIN * RATE);
      }, []);

      useEffect(() => {
        if (workbenchInfo) {
          const { row, column } = workbenchInfo;
          setRowList(createList(row || 0));
          setColumnList(createList(column || 0));
        } else {
          setRowList([]);
          setColumnList([]);
        }
      }, [workbenchInfo]);

      const getBottleInfoById = (id: string): ITBottle | null => {
        let temp = null;
        allBottle.some((item) => {
          if (item.id === id) {
            temp = item;
            return true;
          }
          return false;
        });
        return temp;
      };

      const getShelfAndBottleInfo = (name: string): ITShelfBottle => {
        let temp = null;
        let tempBottle = null;
        allShelf.some((item) => {
          if (item.name === name) {
            temp = item;
            return true;
          }
          return false;
        });
        if (temp) {
          const { bottleType } = temp;
          tempBottle = getBottleInfoById(bottleType);
        }
        return {
          shelfInfo: temp,
          bottleInfo: tempBottle,
        };
      };

      const slotClick = (slotName: string) => {
        setSlotName(slotName);
        if (slotName !== ReactionSlotName) {
          setShowShelfModal(true);
        } else {
          setShowReactModal(true);
        }
      };

      return (
        <div className="workbenchplane">
          <div
            className="bord"
            style={{
              paddingLeft: slotMargin,
              paddingTop: slotMargin,
            }}
          >
            {rowList.map((rowItem) => {
              return (
                <div
                  className="row"
                  key={rowItem}
                  style={{
                    marginBottom: slotMargin,
                    height: slotHeight,
                  }}
                >
                  {columnList.map((colItem) => {
                    const slotName = `${ROWWORD[rowItem]}${colItem + 1}`;
                    // C3是用来添加反应器的，特殊颜色显示一下
                    const isC3 = slotName === ReactionSlotName;

                    let hasMiniPlane = false;
                    let ShelfMiniPlaneParam: ITShelfBottle = {};
                    let shelfName = null;
                    const shelf = shelfs[slotName];
                    if (shelf) {
                      hasMiniPlane = true;
                      shelfName = shelf.shelf;
                      ShelfMiniPlaneParam = getShelfAndBottleInfo(shelfName);
                    }

                    if (isC3 && reactorShelf) {
                      hasMiniPlane = true;
                      const { shelf } = reactorShelf;
                      ShelfMiniPlaneParam = getShelfAndBottleInfo(shelf);
                      shelfName = shelf;
                    }

                    const TipCont = () => (
                      <div
                        className={`hovertip ${
                          langCur === "en" ? "font20" : ""
                        }`}
                      >
                        {isC3
                          ? lang["langselectreactionrack"]
                          : lang["langselectreagentrack"]}
                      </div>
                    );

                    return (
                      <Popover
                        open={hasMiniPlane && hoverPopName === slotName}
                        title={
                          <Space>
                            <Text strong>{slotName}</Text>
                            <Text type="secondary">{shelfName}</Text>
                          </Space>
                        }
                        content={<PopContent label={shelfName} />}
                        key={colItem}
                      >
                        <div
                          key={colItem}
                          className={`slot designer ${isC3 ? "c3" : ""}`}
                          style={{
                            width: slotWide,
                            height: slotHeight,
                            marginRight: slotMargin,
                          }}
                          onClick={() => {
                            slotClick(slotName);
                          }}
                          onMouseEnter={() => {
                            setHoverPopName(slotName);
                          }}
                          onMouseLeave={() => {
                            setHoverPopName("");
                          }}
                        >
                          {!hasMiniPlane && (
                            <div className="slotlabel">{slotName}</div>
                          )}
                          {hasMiniPlane && (
                            <ShelfMiniPlane
                              {...ShelfMiniPlaneParam}
                              slotName={slotName}
                            />
                          )}
                          <TipCont />
                        </div>
                      </Popover>
                    );
                  })}
                </div>
              );
            })}
          </div>
        </div>
      );
    }
  )
);

const ReactorSelectModal: FC<TProp | any> = inject("store")(
  observer(
    ({ store, slotName, showModal, close, selectShelf, data }: ITRSProp) => {
      const {
        languageStore: { lang },
        shelfStore: { allShelf },
      } = store;
      const [selectValue, setSelectValue] = useState<string>("");

      const onSelect = (data: string) => {
        setSelectValue(data);
      };

      useEffect(() => {
        let shelfName = "";
        if (data) {
          shelfName = data.shelf;
        }
        setSelectValue(shelfName);
      }, [data]);

      const options = useMemo(() => {
        let list: any[] = [{ label: lang["langempty"], value: "" }];
        if (allShelf && allShelf.length) {
          allShelf.forEach((item) => {
            // 过滤反应架
            if (item.rackType === "reactor") {
              list.push({
                label: item.name,
                value: item.name,
              });
            }
          });
        }
        return list;
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, [allShelf]);

      const closeModal = () => {
        close();
      };

      const selectReactor = () => {
        selectShelf({ slotName, shelf: selectValue });
        closeModal();
      };

      return (
        <Modal
          title={slotName}
          open={showModal}
          onOk={selectReactor}
          onCancel={closeModal}
          destroyOnClose={true}
          confirmLoading={false}
        >
          <Select
            style={{ width: "100%" }}
            defaultValue={null}
            value={selectValue}
            onSelect={onSelect}
          >
            {!!options.length &&
              options.map(({ label, value }: any, index: number) => (
                <Option value={value} key={index}>
                  <Popover
                    placement="left"
                    title={label}
                    content={<PopContent label={value} />}
                  >
                    <div>{label}</div>
                  </Popover>
                </Option>
              ))}
          </Select>
        </Modal>
      );
    }
  )
);

// 反应架列表选择弹窗
const ReactorSelectListModal: FC<ITPopCont | any> = inject("store")(
  observer(
    ({
      store,
      showReactModal,
      close,
      slotName,
      workbenchInfo,
      selectShelf,
      data,
    }: ITRPopCont) => {
      const {
        shelfStore: { allShelf },
        bottleStore: { allBottle },
      } = store;

      const [rrowList, setRRowList] = useState<number[]>([]);

      const [rcolumnList, setRcolumnList] = useState<number[]>([]);

      const [slotMargin, setSlotMargin] = useState<number>(0);

      const [slotHeight, setSlotHeight] = useState<number>(0);

      const [slotWide, setSlotWide] = useState<number>(0);

      const [hasSelectData, setHasSelectData] = useState<any>(null);

      const [showModal, setShowModal] = useState<boolean>(false);

      const [rslotName, setRslotName] = useState<string>("");

      useEffect(() => {
        setSlotHeight(BASEHEIGHT * RATE);
        setSlotWide(BASEWIDE * RATE);
        setSlotMargin(MARGIN * RATE);
      }, []);

      useEffect(() => {
        setHasSelectData(data);
      }, [data]);

      useEffect(() => {
        if (workbenchInfo) {
          const { rrow, rcolumn } = workbenchInfo;
          setRRowList(createList(rrow || 0));
          setRcolumnList(createList(rcolumn || 0));
        }
      }, [workbenchInfo]);

      const getBottleInfoById = (id: string) => {
        let temp = null;
        allBottle.some((item) => {
          if (item.id === id) {
            temp = item;
            return true;
          }
          return false;
        });
        return temp;
      };

      const getShelfAndBottleInfo = (name: string) => {
        let temp = null;
        let tempBottle = null;
        allShelf.some((item) => {
          if (item.name === name) {
            temp = item;
            return true;
          }
          return false;
        });
        if (temp) {
          const { bottleType } = temp;
          tempBottle = getBottleInfoById(bottleType);
        }
        return {
          shelfInfo: temp,
          bottleInfo: tempBottle,
        };
      };

      const closeModal = () => {
        close();
      };

      const closeSelectModal = () => {
        setRslotName("");
        setShowModal(false);
      };

      const slotClick = (rslotName: string) => {
        setRslotName(rslotName);
        setShowModal(true);
      };

      const slotSelect = (data: any) => {
        const { shelf } = data;
        let obj = data;
        if (!shelf) {
          obj = null;
        }
        // setHasSelectData(obj);
        selectShelf(obj);
      };

      return (
        <>
          <Modal
            title={slotName}
            open={showReactModal}
            onOk={closeModal}
            onCancel={closeModal}
            destroyOnClose={true}
            footer={null}
            width={960}
          >
            <div className="workbenchplane">
              <div
                className="bord"
                style={{
                  paddingLeft: slotMargin,
                  paddingTop: slotMargin,
                }}
              >
                {rrowList.map((rowItem) => {
                  return (
                    <div
                      className="row"
                      key={rowItem}
                      style={{
                        marginBottom: slotMargin,
                        height: slotHeight,
                      }}
                    >
                      {rcolumnList.map((colItem) => {
                        const rslotName = `${RROWWORD[rowItem]}${colItem + 1}`;
                        // let hasMiniPlane = false;
                        let miniPlaneSlotName = null;
                        let reactShelfMiniPlaneParam = {};

                        // 未选择反应插槽，所有都可以点击
                        let isDisplay = false;

                        if (hasSelectData) {
                          const { slotName, shelf } = hasSelectData;
                          miniPlaneSlotName = slotName;
                          // hasMiniPlane = true;
                          reactShelfMiniPlaneParam =
                            getShelfAndBottleInfo(shelf);

                          if (rslotName === slotName) {
                            isDisplay = false;
                          } else {
                            isDisplay = true;
                          }
                        }

                        return (
                          <div
                            key={colItem}
                            className={`slot designer c3 ${
                              isDisplay ? "display" : ""
                            }`}
                            style={{
                              width: slotWide,
                              height: slotHeight,
                              marginRight: slotMargin,
                            }}
                            onClick={() => {
                              !isDisplay && slotClick(rslotName);
                            }}
                          >
                            {rslotName === miniPlaneSlotName && (
                              <ShelfMiniPlane {...reactShelfMiniPlaneParam} />
                            )}
                            {rslotName !== miniPlaneSlotName && (
                              <div className="slotlabel">{rslotName}</div>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  );
                })}
              </div>
            </div>
          </Modal>
          <ReactorSelectModal
            close={closeSelectModal}
            slotName={rslotName}
            showModal={showModal}
            selectShelf={slotSelect}
            data={hasSelectData}
          />
        </>
      );
    }
  )
);

const AddEditExpTableModal: FC<TProp | any> = inject("store")(
  observer(({ store, isShow, close, data }: TProp) => {
    const {
      languageStore: { lang },
      workbenchStore: { allWorkbench, addExpTable, upDateExpTable, getAllExpTable },
    } = store;
    const [form] = Form.useForm();

    const [selectWorkBench, setSelectWorkBench] = useState<ITWorkbench | null>(
      null
    );

    const [slotName, setSlotName] = useState<string>("");

    // 是否显示试剂架选择弹窗
    const [showShelfModal, setShowShelfModal] = useState<boolean>(false);

    // 是否显示反应架选择弹窗
    const [showReactModal, setShowReactModal] = useState<boolean>(false);

    const [panelShelfName, setPanelShelfName] = useState<any>({});

    const [reactorShelfName, setReactorShelfName] = useState<any>(null);

    const [loading, setLoading] = useState(false);

    useEffect(() => {
      if (data) {
        const { name, id, desc, workbench, reactorSlotShelf, slotShelf } = data;
        form.setFieldsValue({
          id,
          name,
          desc,
          workbench,
        });

        allWorkbench.map((item) => {
          if (item.id === workbench) {
            setSelectWorkBench(item);
            return true;
          }
          return false;
        });
        setPanelShelfName(slotShelf);

        const keys = Object.keys(reactorSlotShelf);
        setReactorShelfName({
          slotName: keys[0],
          ...reactorSlotShelf[keys[0]],
        });
      } else {
        setPanelShelfName({});
        setReactorShelfName(null);
        setSelectWorkBench(null);
        form.resetFields();
      }
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [data, form]);

    const closeModal = () => {
      setPanelShelfName({});
      setReactorShelfName(null);
      setSelectWorkBench(null);
      form.resetFields();
      close();
    };

    const formFinish = async (values: any) => {
      // addExpTable()
      const { id, name, desc, workbench } = values;
      if (!reactorShelfName || !panelShelfName) {
        message.error(lang["langdesignernext1"]);
        return false;
      }

      const { shelf, slotName } = reactorShelfName;
      let tmpReactorShelf: any = "";
      if (shelf) {
        tmpReactorShelf = {
          [slotName]: { shelf },
        };
      }

      let result = null;
      let msg: string = "";
      setLoading(true);

      if (!id) {
        // 新增
        result = await addExpTable({
          name,
          desc,
          workbench,
          slotShelf: panelShelfName,
          reactorSlotShelf: tmpReactorShelf,
        });
        msg = lang["langaddsuccess"];
      } else {
        // 编辑
        result = await upDateExpTable({
          id,
          name,
          desc,
          workbench,
          slotShelf: panelShelfName,
          reactorSlotShelf: tmpReactorShelf,
        });
        msg = lang["langmodifysuccess"];
      }
      setLoading(false);

      if (!result) {
        close();
        message.success(msg);
        getAllExpTable();
      } else {
        const { msg } = result;
        message.error(msg);
      }
    };

    const PopoverCont = ({ data }: any): JSX.Element => {
      const { name, row, column, rrow, rcolumn } = data;

      const rowNum = createList(row);
      const colNum = createList(column);
      const rrowNum = createList(rrow);
      const ccolNum = createList(rcolumn);

      return (
        <>
          <Descriptions bordered size="small">
            <Descriptions.Item label={lang["langname"]}>
              {name}
            </Descriptions.Item>
            <Descriptions.Item
              label={`${lang["langrow"]}(${lang["langreagent"]})`}
            >
              {row}
            </Descriptions.Item>
            <Descriptions.Item
              label={`${lang["langcolumn"]}(${lang["langreagent"]})`}
            >
              {column}
            </Descriptions.Item>
            <Descriptions.Item
              label={`${lang["langrow"]}(${lang["langreaction"]})`}
            >
              {rrow}
            </Descriptions.Item>
            <Descriptions.Item
              label={`${lang["langcolumn"]}(${lang["langreaction"]})`}
            >
              {rcolumn}
            </Descriptions.Item>
          </Descriptions>
          <div className="wbexp">
            {rowNum.map((ritem: number) => {
              return (
                <div key={ritem} className="exprow">
                  {colNum.map((citem: number) => {
                    return (
                      <div key={citem} className="expcol">
                        <div className="exlabel">
                          {ROWWORD[ritem]}
                          {citem + 1}
                        </div>
                      </div>
                    );
                  })}
                </div>
              );
            })}
            {rrowNum.map((ritem: number) => {
              return (
                <div key={ritem} className="exprow">
                  {ccolNum.map((citem: number) => {
                    return (
                      <div key={citem} className="expcol">
                        <div className="exlabel">
                          {RROWWORD[ritem]}
                          {citem + 1}
                        </div>
                      </div>
                    );
                  })}
                </div>
              );
            })}
          </div>
          <div style={{ clear: "both" }}></div>
        </>
      );
    };

    const workBenchSelect = (data: any) => {
      allWorkbench.map((item) => {
        if (item.id === data) {
          setSelectWorkBench(item);
          return true;
        }
        return false;
      });
    };

    const selectShelf = (data: any) => {
      const { slotName, value } = data;
      if (value) {
        // 添加
        setPanelShelfName(
          Object.assign({}, panelShelfName, {
            [slotName]: { shelf: value },
          })
        );
      } else {
        // 删除
        const result = _.omit(panelShelfName, [slotName]);
        setPanelShelfName(result);
      }
    };

    const selectReactorShelf = (data: any) => {
      const { shelf } = data || {};
      if (shelf) {
        setReactorShelfName(data);
        // setReactorShelfName({
        //   [slotName]: { shelf },
        // });
      } else {
        setReactorShelfName(null);
      }
    };

    const closeShelfModal = () => {
      setSlotName("");
      setShowShelfModal(false);
    };

    const closeReactorModal = () => {
      setSlotName("");
      setShowReactModal(false);
    };

    return (
      <>
        <Modal
          title={
            <Row>
              <Col span={12}>{lang["langexperimenttable"]}</Col>
            </Row>
          }
          open={isShow}
          destroyOnClose={true}
          onOk={() => {
            form.submit();
          }}
          width="90%"
          confirmLoading={loading}
          onCancel={closeModal}
          forceRender
        >
          <Form
            {...layout}
            form={form}
            name="exptableForm"
            onFinish={formFinish}
          >
            <Form.Item name="id" label="" hidden={true}>
              <Input />
            </Form.Item>
            <Row gutter={24}>
              <Col span={8}>
                <Form.Item
                  name="name"
                  label={lang["langname"]}
                  rules={[{ required: true }]}
                >
                  <Input style={inputwide} />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  name="workbench"
                  label={lang["langselectwb"]}
                  rules={[{ required: true }]}
                >
                  <Select onSelect={workBenchSelect}>
                    {!!allWorkbench &&
                      !!allWorkbench.length &&
                      allWorkbench.map((item, index) => {
                        const { name, id } = item;
                        return (
                          <Option value={id} key={index}>
                            <Popover
                              placement="left"
                              content={<PopoverCont data={item} />}
                            >
                              <div>{name}</div>
                            </Popover>
                          </Option>
                        );
                      })}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item name="desc" label={lang["langdescription"]}>
                  <Input style={inputwide} />
                </Form.Item>
              </Col>
            </Row>
          </Form>
          <Divider />
          <WorkbenchView
            workbenchInfo={selectWorkBench}
            setSlotName={setSlotName}
            setShowShelfModal={setShowShelfModal}
            setShowReactModal={setShowReactModal}
            shelfs={panelShelfName}
            reactorShelf={reactorShelfName}
          />
        </Modal>

        {/* 试剂架选择弹窗 */}
        <ShelfSelectModal
          showShelfModal={showShelfModal}
          close={closeShelfModal}
          slotName={slotName}
          selectShelf={selectShelf}
          data={panelShelfName[slotName]}
        />

        {/* 反应架选择弹窗 */}
        <ReactorSelectListModal
          workbenchInfo={selectWorkBench}
          close={closeReactorModal}
          slotName={slotName}
          showReactModal={showReactModal}
          selectShelf={selectReactorShelf}
          data={reactorShelfName}
        />
      </>
    );
  })
);

const SearchAddComp: FC<SearchProp | any> = inject("store")(
  observer(({ store, showAddModal }: SearchProp) => {
    const {
      languageStore: { lang },
    } = store;

    const handleClickAdd = () => {
      showAddModal();
    };

    return (
      <Row style={{ marginBottom: 20 }}>
        <Col span={12}></Col>
        <Col span={12}>
          <Space wrap style={{ float: "right" }}>
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={handleClickAdd}
            >
              {lang["langbuttonadd"]}
            </Button>
          </Space>
        </Col>
      </Row>
    );
  })
);

const ExpTableList: FC<TProp | any> = inject("store")(
  observer(({ store, showAddModal, modify }: TProp) => {
    const {
      languageStore: { lang },
      workbenchStore: {
        allExpTable,
        delExpTable,
        getAllExpTable,
        allWorkbench,
      },
    } = store;

    const [delData, setDelData] = useState<ITExpTable | null>(null);

    const [delLoading, setDelLoading] = useState<boolean>(false);

    const deleteItem = async (record: ITExpTable) => {
      setDelData(record);
      const { id } = record;
      setDelLoading(true);
      const res = await delExpTable({ id });
      setDelLoading(false);
      if (!res) {
        getAllExpTable();
        message.success(lang["langdeletesuccess"]);
        setDelData(null);
      }
    };

    const modifyItem = async (record: ITExpTable) => {
      modify(record);
      showAddModal();
    };

    const columns: ITColumns[] = [
      {
        title: lang["langname"],
        dataIndex: "name",
        key: "name",
      },
      {
        title: lang["langworkbench"],
        dataIndex: "workbench",
        key: "workbench",
        render: (wid: string) => {
          let tempName: any = "";
          allWorkbench.some((item) => {
            if (item.id === wid) {
              tempName = item.name;
              return true;
            }
            return false;
          });
          return tempName;
        },
      },
      {
        title: lang["langdescription"],
        dataIndex: "desc",
        key: "desc",
      },
      {
        title: lang["langedit"],
        dataIndex: "edit",
        key: "edit",
        width: 110,
        align: "center",
        fixed: "right",
        render: (txt: string, record: ITExpTable) => {
          return (
            <Space>
              <Tooltip title={lang["langedit"]}>
                <Button
                  type="link"
                  icon={<EditOutlined />}
                  onClick={() => {
                    modifyItem(record);
                  }}
                />
              </Tooltip>
              <Popconfirm
                title={lang["langconfirmdel"]}
                onConfirm={() => {
                  deleteItem(record);
                }}
              >
                <Tooltip title={lang["langdelete"]}>
                  <Button
                    type="link"
                    danger
                    loading={delData?.id === record.id && delLoading}
                    icon={<DeleteOutlined />}
                  />
                </Tooltip>
              </Popconfirm>
            </Space>
          );
        },
      },
    ];

    return (
      <Table
        dataSource={allExpTable}
        columns={columns}
        bordered
        loading={false}
      />
    );
  })
);

const ExperimentTables: FC<TProp | any> = ({ store }: TProp): JSX.Element => {
  const {
    workbenchStore: { allWorkbench, getAllWorkbench, getAllExpTable },
    shelfStore: { getAllShelf, allShelf },
    bottleStore: { getAllBottle, allBottle },
  } = store;

  // 是否显示 新增编辑工作台弹窗
  const [showExpTableModal, setShowExpTableModal] = useState(false);

  const [modifyData, setModifyData] = useState<ITExpTable | null>(null);

  useEffect(() => {
    if (!allWorkbench.length) {
      getAllWorkbench();
    }
    if (!allShelf.length) {
      getAllShelf();
    }
    if (!allBottle.length) {
      getAllBottle();
    }

    getAllExpTable();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const closeExpTableModal = () => {
    setModifyData(null);
    setShowExpTableModal(false);
  };

  return (
    <>
      {/* 搜索和新增按钮组件 */}
      <SearchAddComp
        showAddModal={() => {
          setShowExpTableModal(true);
        }}
      />

      {/* 预设工作台列表 */}
      <ExpTableList
        showAddModal={() => {
          setShowExpTableModal(true);
        }}
        modify={setModifyData}
      />

      {/* 新增编辑预设工作台弹窗 */}
      <AddEditExpTableModal
        isShow={showExpTableModal}
        close={closeExpTableModal}
        data={modifyData}
      />
    </>
  );
};

export default inject("store")(observer(ExperimentTables));
